<template>
	<el-form :model="addForm" label-width="80px"  :rules="addFormRules" ref="addForm" style="margin:20px;width:60%;min-width:600px;">
		<el-form-item label="任务名称" prop="name">
			<el-input v-model="addForm.name"></el-input>
		</el-form-item>
		<el-form-item label="任务类型" prop="type">
			<el-select v-model="addForm.type" placeholder="请选择">
				<el-option label="平面设计" value="平面设计"></el-option>
				<el-option label="文字约稿" value="文字约稿"></el-option>
				<el-option label="数据处理" value="数据处理"></el-option>
				<el-option label="翻译" value="翻译"></el-option>
				<el-option label="其他" value="其他"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="任务奖励" prop="reward">
			<el-input v-model="addForm.reward" :maxlength="6"></el-input>
		</el-form-item>
		<el-form-item label="截止日期" prop="closeDate">
			<el-col :span="11">
				<el-date-picker type="date" placeholder="选择日期" v-model="addForm.closeDate" style="width: 100%;"></el-date-picker>
			</el-col>
		</el-form-item>
		<el-form-item label="截止时间" prop="closeTime">
			<el-col :span="11">
				<el-time-picker type="fixed-time" placeholder="选择时间" v-model="addForm.closeTime" style="width: 100%;"></el-time-picker>
			</el-col>
		</el-form-item>
		<el-form-item label="任务需求" prop="instruction">
			<el-input type="textarea" v-model="addForm.instruction"></el-input>
		</el-form-item>
		<el-form-item label="任务封面" prop="cover">
			<el-upload
				class="avatar-uploader"
				:action= 'uploadcover'
				:show-file-list="false"
				:with-credentials='true'
				:on-success="handleAvatarSuccess"
				:before-upload="beforeAvatarUpload">
				<img v-if="addForm.cover" :src="addForm.cover" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<!-- <el-input class="upload" @change='add_img' type="file" v-if="addForm.cover == ''"></el-input>
			<img :src="addForm.cover" v-else style="width: 60px; height: 60px;"> -->
		</el-form-item>
		<el-form-item label="须知描述" prop="notes">
			<el-input type="textarea" v-model="addForm.notes"></el-input>
		</el-form-item>
		<el-form-item label="任务要求" prop="numberRequirement">
			<el-input type="textarea" v-model="addForm.numberRequirement"></el-input>
		</el-form-item>
		<el-form-item label="任务个数" prop="taskCount">
			<el-input v-model="addForm.taskCount" :maxlength="2"></el-input>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click.native="addSubmit" :loading="addLoading">立即发布</el-button>
			<!-- <el-button @click.native.prevent>取消</el-button> -->
		</el-form-item>
	</el-form>
</template>

<script>
import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { createTask, uploadcover } from '../../api/api';
	//import moment from 'moment'
	
	export default {
		data() {
			return {
				uploadcover: "",
				addForm: {
					name: '',
					type: '',
					reward: '',
					closeDate: '',
					closeTime: '',
					cover: '',
					notes: '',
					numberRequirement: '',
					taskCount: '',
				},
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入', trigger: 'blur'}
					],
					type: [
						{ required: true, message: '请选择' }
					],
					reward: [
						{ required: true, message: '请输入', trigger: 'blur' }
					],
					closeDate: [
						{ required: true, message: '请选择' }
					],
					closeTime: [
						{ required: true, message: '请选择' }
					],
					instruction: [
						{ required: true, message: '请输入', trigger: 'blur' }
					],
					cover: [
						{ required: true, message: '请上传', trigger: 'blur' }
					],
					notes: [
						{ required: true, message: '请输入', trigger: 'blur' }
					],
					numberRequirement: [
						{ required: true, message: '请输入', trigger: 'blur' }
					],
					taskCount: [
						{ required: true, message: '请输入', trigger: 'blur' }
					],
				},
			}
		},
		methods: {
			handleAvatarSuccess(res, file) {
				if(res.status == 0){
					this.addForm.cover = res.out_data.fileUrl;
				}else{
					this.$message.error(res.desc);
				}
				//console.log(res);
				//this.addForm.cover = URL.createObjectURL(file.raw);
				//console.log(this.addForm.cover);
			},
			beforeAvatarUpload(file) {
				console.log(file.type);
				const isJPG = file.type === 'image/png';
				const isPNG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG && !isPNG) {
					this.$message.error('上传图片只能是 JPG,PNG 格式!');
					return false;
				}
				if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
					return false;
				}
			},
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);

							createTask(para).then(data=>{
								this.addLoading = false;
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								let {status,desc} = data;
								if(status == 0){
									this.$message({
										message: '提交成功',
										type: 'success'
									});
								}else{
									this.$message({
										message: desc,
										type: 'error'
									});
								}
							});
						});
					}
				});
			},
		},
		mounted() {
			this.uploadcover = uploadcover;
		}
	}

</script>

<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #ccc;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
	background: #ccc;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>